<template>
    <el-dialog width="55%" title="部门成员列表" :visible="visible" @close="close">
        <div class="staff-alert">
            <!--            顶部标签区域-->
            <div class="head border mb10">
                <el-tag
                    class="m5"
                    size="small"
                    v-for="tag in tags"
                    :key="tag.name"
                    closable
                    :type="tag.type"
                >{{ tag.name }}
                </el-tag>
            </div>
            <!--            内容选择区域-->
            <div class="contain border plr5">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <!--                    组织架构-->
                    <el-tab-pane label="组织架构" name="first">
                        <div class="wrap">
                            <el-tree
                                :data="organizationData"
                                show-checkbox
                                node-key="id"
                                :default-expanded-keys="[2, 3]"
                                :default-checked-keys="[5]"
                            ></el-tree>
                        </div>
                    </el-tab-pane>
                    <!--                    角色-->
                    <el-tab-pane label="角色" name="second">
                        <div class="wrap">
                            <el-tree
                                :data="roleData"
                                show-checkbox
                                node-key="id"
                                :default-expanded-keys="[2, 3]"
                                :default-checked-keys="[5]"
                            ></el-tree>
                        </div>
                    </el-tab-pane>
                    <!--                    成员-->
                    <el-tab-pane label="成员" name="third">
                        <div class="wrap flex-t">
                            <div class="flex-bet w100">
                                <div class="organization">
                                    <el-tree
                                        :data="organizationData"
                                        node-key="id"
                                        :default-expanded-keys="[2, 3]"
                                        :default-checked-keys="[5]"
                                    ></el-tree>
                                </div>
                                <div class="member flex-col-t">
                                    <div class="flex-bet w100 choose mb10 plr10 pb5">
                                        <span>已选 0/5</span>
                                        <el-checkbox size="mini" v-model="checked"></el-checkbox>
                                    </div>
                                    <div class="plr10 pb5 flex-col-t w100 member-list">
                                        <div
                                            class="w100 flex-bet mb5"
                                            v-for="(item,index) in 13"
                                            :key="index"
                                        >
                                            <div>
                                                <span class="mr5">M</span>
                                                <span>Merrilltan</span>
                                            </div>
                                            <el-checkbox size="mini" v-model="checked"></el-checkbox>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <!--                    动态负责人-->
                    <el-tab-pane label="动态负责人" name="fourth">
                        <div class="wrap">
                            <div class="leader flex-bet">
                                <div class="l mr10">
                                    <div
                                        class="mb5"
                                        v-for="(item,index) in leader"
                                        :key="index"
                                        @click="index1 = index"
                                    >{{ item.label }}
                                    </div>
                                    <!--                                    <div>主管</div>-->
                                </div>
                                <div class="m" v-if="leader[index1].children">
                                    <div
                                        @click="index2 = index"
                                        class="mb5"
                                        v-for="(item,index) in leader[index1].children"
                                        :key="index"
                                    >{{ item.label }}
                                    </div>
                                    <!--                                    <div class="">导购员</div>-->
                                </div>
                                <div class="r flex-col-t pl10" v-if="leader[index2].children[index3].children">
                                    <span class="mb10 w100 royal">发起人的主管级别</span>
                                    <div class="manage w100">
                                        <div
                                            @click="index3 = index"
                                            class="w100 flex-bet mb5"
                                            v-for="(item,index) in leader[index2].children[index3].children"
                                            :key="index"
                                        >
                                            <span class="mr5">直接上级主管</span>
                                            <el-checkbox size="mini" v-model="item.checked"></el-checkbox>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <template #footer>
            <el-button size="mini">取消</el-button>
            <el-button size="mini" type="primary">确定</el-button>
        </template>
    </el-dialog>
</template>

<script>
const organizationData = [
    {
        id: 1,
        label: '广州公司',
        children: [
            {
                id: 2,
                label: '行政部'
            },
            {
                id: 3,
                label: '销售中心'
            },
            {
                id: 4,
                label: '后期中心'
            }
        ]
    }
]
const roleData = [
    {
        id: 1,
        label: '默认',
        children: [
            {
                id: 2,
                label: '导购员'
            }
        ]
    }
]
const leader = [
    {
        id: 1,
        label: '流程发起人1',
        children: [
            {
                id: 2,
                label: '发起人1',
                children: [{
                    id: 1,
                    label: '直接部门主管'
                }, {
                    id: 1,
                    label: '直接上级主管'
                }]
            },
            {
                id: 2,
                label: '发起人2'
            }
        ]
    },
    {
        id: 1,
        label: '流程发起人2'
    },
    {
        id: 1,
        label: '流程发起人3'
    }
]
export default {
    name: 'StaffAlert',
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            index1: 0,
            index2: 0,
            index3: 0,
            activeName: 'first',
            checked: false,
            tags: [
                {
                    name: '标签一',
                    type: ''
                },
                {
                    name: '标签二',
                    type: 'success'
                },
                {
                    name: '标签三',
                    type: 'info'
                },
                {
                    name: '标签四',
                    type: 'warning'
                },
                {
                    name: '标签五',
                    type: 'danger'
                }
            ],
            // 角色
            roleData: [],
            // 组织
            organizationData: [],
            // 动态负责人
            leader: []
        }
    },
    methods: {
        handleClick (tab, event) {
            switch (+tab.index) {
            case 0:
                this.organizationData = organizationData
                break
            case 1:
                this.roleData = roleData
                break
            case 2:
                this.organizationData = organizationData
                break
            case 3:
                this.leader = leader
                break
            default:
                break
            }
            // console.log(tab.index, event)
        },
        getData () {
        },
        close () {
            this.$emit('update:visible', false)
        }
    }
}
</script>

<style scoped lang="scss">
.staff-alert {
    .head {
        height: 7vh;
    }

    .contain {
        /deep/ .wrap {
            overflow-y: scroll;
            min-height: 30vh;

            .organization {
                width: 25vw;
                height: 30vh;
                border-right: 1px solid #eaeaea;
            }

            .member {
                height: 30vh;
                width: 25vw;

                .member-list {
                    height: 24vh;
                    overflow-y: scroll;
                }

                .choose {
                    border-bottom: solid 1px #e8e8e8;
                }
            }

            .leader {
                .l {
                    width: 30vw;
                    height: 30vh;
                    overflow-y: scroll;
                    border-right: 1px solid #e8e8e8;
                }

                .m {
                    width: 100%;
                    height: 30vh;
                    overflow-y: scroll;
                }

                .r {
                    width: 40vw;
                    height: 30vh;
                    border-left: 1px solid #e8e8e8;

                    .manage {
                        height: 25vh;
                        overflow-y: scroll;
                    }
                }
            }
        }
    }
}
</style>
